import React, { ChangeEventHandler } from 'react';
import styled from 'styled-components';
import { Input } from 'components/Input';

const Wrapper = styled.section`
  background: #f5f5f5;
  font-size: 14px;
  padding: 14px 16px;
`;

type Props = {
  value: string;
  onChange: (value: string) => void;
};

export const NoteSection: React.FC<Props> = props => {
  const note = props.value;
  const onChange: ChangeEventHandler<HTMLInputElement> = e => {
    props.onChange(e.target.value);
  };
  return (
    <Wrapper>
      <Input
        label="备注"
        type="text"
        value={note}
        onChange={onChange}
        placeholder="请填写备注"
      />
    </Wrapper>
  );
};
